@import "maxin/lesshat";

@import "maxin/marchen";

//*---------------------------------------------------------------------------------------*/
//*  start your less code from here
//*---------------------------------------------------------------------------------------*/

body {
    background-color: @bg-grey;
    background-color: black;
}

.play-container {
	.clearfix;
	position: relative;
	width: 800px;
	height: auto;
	margin: 0 auto;
	padding: 15px;
	background-color: rgba(255, 255, 255, 0.8);
	background-color: black;
	.border-radius(5px);
}
.play-list {
	width: 400px;
	float: left;
	li {
		cursor: pointer;
		color:rgb(124, 124, 124);
		font-size:1.125rem;
		background-color: rgba(236, 236, 236, 0.4);
		padding: 10px;
	}
	.on {
		color: white;
		background-color: rgb(237, 101, 101);
	}
}
.play-control {
	float: right;
	width: 380px;
	display: inline-block;
	.time {
		height: 6px;
		.border-radius(3px);
		background-color: rgb(253, 103, 114);
		margin-bottom: 20px;
	}
	.btn-box {
		text-align: center;
		font-size: 0;
		letter-spacing: 20px;
		word-spacing: 20px;
		> div {
			display: inline-block;
			cursor: pointer;
			padding: 5px 20px;
			background-color: rgb(62, 179, 221);
			color: white;
			font-size: 1rem;
			letter-spacing: 0px;
			.border-radius(2px);
		}
	}
}
.play-analy {
	clear: both;
	.btn {
		display: inline-block;
		cursor: pointer;
		color: white;
		padding: 5px 20px;
		.border-radius(2px);
		background-color: rgb(59, 161, 223);
		margin: 20px 0 10px;
	}
}
#canvasCircle {
	margin-left: -200px;
}